/**
 * Created by wangzilong on 2017/4/11.
 */
import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    ScrollView,
    TouchableOpacity,
    TextInput,
    ListView,
    Animated,
    Platform,
    InteractionManager
} from 'react-native';
import ImageWrapper from '../components/ImageWrapper';
import NavigationBar from '../components/NavigationBar';
import shopService from '../lib/services/shopService';
import StorageUser from '../lib/plugins/StorageUser';
var Dimensions = require('Dimensions');
const { width, height } = Dimensions.get('window');

export default class StoreReview extends Component{
    constructor(props) {
        super(props);
        this.token = '';
        this.userId = '';
        this.state = {
            widthAnim:null,
            animateList:[],
            dataList:[],
        };
        
    }
    componentDidMount() {
        var $this = this;
        StorageUser._getUser()
            .then(data=>{
                if(data.userId){
                    $this.userId = data.userId;
                }
                if(data.token){
                    $this.token = data.token;
                }
                InteractionManager.runAfterInteractions(() => {
                    $this.getData();
                });
            }).catch(err=> {
                console.log(err)
            }); 
        
    }

    renderShop(){
        var list = this.state.dataList;
        return(
            list.map((item,i)=>{
                return(
                    <View key={i} style={{marginBottom:10}}>
                        <View style={{backgroundColor:'#fff',height:40,paddingLeft:20,flexDirection:'row',alignItems:'center',borderBottomWidth:1,borderBottomColor:'#EFEFF1'}}>
                            <Text style={{color:'#24A0EF',fontSize:16}}>店铺名称:</Text>
                            <Text>{item.merchant_name}</Text>
                        </View>
                        <View style={styles.statursBox}>
                            <View style={{flexDirection:'row',height:30,alignItems:'center'}}>
                                <Text style={styles.statursText}>完善资料</Text>
                                <Text style={[styles.statursText,{flex:1,textAlign:'center'}]}>审核中</Text>
                                <Text style={styles.statursText}>审核完成</Text>
                            </View>
                            <View style={{backgroundColor:'#B6B6B6',height:10}}>
                                <Animated.View
                                     style={{width: this.state.animateList[i]}}>
                                     <View style={{backgroundColor:'#007AFF',height:10}}>
                                     </View>
                                </Animated.View>
                                
                            </View>
                        </View> 
                        <View>
                            <View style={{paddingLeft:20,height:30,justifyContent:'center'}}>
                                <Text style={{color:'#0894ED',fontSize:16}}>审核结果:</Text>
                            </View>
                            <View style={styles.resultBox}>
                                <Text>{item.status==3?'审核未通过':(item.failure_reason?item.failure_reason:'暂无结果')}</Text>
                            </View>
                        </View>
                    </View>
                )
            })
        )
    }

    render(){
        return (
            <View style={styles.container}>
                <NavigationBar 
                    leftIcon={'left'} 
                    titleText={'审核状态'}
                    leftPress={()=>this.goBack()}/>
                <ScrollView>
                    {this.renderShop()}
                </ScrollView>
            </View>
        )

    }

    goBack(){
        this.props.navigation.goBack();
    }

    getData(){
        var $this = this;
        shopService.userAuditSchedule(function(data){
            // alert(JSON.stringify(data));
            if(data.code==10000){
                var list = $this.state.animateList;
                var arr = data.data;
                var len = arr.length;
                for(var i=0;i<len;i++){
                    var animate = new Animated.Value(0);
                    list.push(animate);
                }
                
                $this.setState({
                    animateList:list,
                    dataList:arr,
                })
                Animated.parallel(arr.map((item,i)=>{
                    var num = 0;
                    if(item.status==1){
                        num = 0.7;
                    }else if(item.status==2){
                        num = 1;
                    }else if(item.status==3){
                        num = 1;
                    }
                    return Animated.timing(
                        list[i],
                        {
                            toValue: num*(width-40),
                            duration:1000
                        },
                    )
                })).start();
                // Animated.parallel([
                //     Animated.timing(
                //         $this.state.list[0],
                //         {
                //             toValue: 0.2*(width-40),
                //             duration:1500
                //         },
                //     )
                // ]).start();
            }
        },$this.userId,$this.token);
    }
}



const styles = StyleSheet.create({
    container:{
        flex:1,
        backgroundColor:'#EFEFF4',
        ...Platform.select({
            ios: {
                marginTop: 20
            },
            android: {
                marginTop:0
            },

        }),
    }, 
    statursText:{
        color:'#24A0EF'
    },
    statursBox:{
        backgroundColor:'#fff',
        paddingLeft:20,
        paddingRight:20,
        paddingBottom:20,
        paddingTop:10
    },
    resultBox:{
        backgroundColor:'#fff',
        height:80,
        width:width,
        paddingLeft:20,
        paddingRight:20,
        paddingTop:10,
        paddingBottom:10,
        borderTopWidth:1,
        borderTopColor:'#ddd'
    }
    
});